<template>
  <p>Home</p>
  <p>ref</p>
  <p>count:{{ count }}</p>
  <p>test{{ test }}</p>
  <p>reactive</p>
  <p>obj ::{{ obj }}</p>
  <p>obj.name :: {{ obj.name }}</p>
  <p>obj.age ::{{ obj.age }}</p>
  <p>arr: {{ arr }}</p>
  <p>arr[0]: {{ arr[0] }}</p>
  <p>computed===========</p>
  <p>countAddFive:{{ countAddFive }}</p>
  <p>methods =======</p>
  <button @click="countAddOne">count 加 1</button>
  <button @click="countAddTwo">count 加 2</button>
  <button @click="updateObj">更新obj</button>

  <p>组件</p>
  <Son :foo="obj.name" :age="obj.age"></Son>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'
import Son from './son.vue'
export default {
  components: {
    Son
  },
  setup() {
    //定义 data
    const count = ref(0)
    const test = ref('hello world')

    console.log(count.value)

    //reactive
    const obj = reactive({
      name: 'tom',
      age: 12
    })

    const arr = [1, 2, 3, 4]

    console.log('obj.name', obj.name)

    // computed
    const countAddFive = computed(() => {
      return count.value + 5
    })

    //methods
    function countAddOne() {
      count.value++
    }
    function countAddTwo() {
      count.value += 2
    }
    const updateObj = () => {
      updateObjname()
    }

    const updateObjname = () => {
      obj.name = 'jerry'
    }

    //watch
    watch(count, (newVal, oldVal) => {
      console.log('count 改变了')
      console.log('newVal', newVal)
      console.log('oldVal', oldVal)
    })
    watch(countAddFive, (newVal, oldVal) => {
      console.log('countAddFive 改变了')
      console.log('newVal', newVal)
      console.log('oldVal', oldVal)
    })
    watch(obj, (newVal, oldVal) => {
      console.log('obj 改变了')
      console.log('newVal', newVal)
      console.log('oldVal', oldVal)
    })
    watch(
      () => obj.name,
      (newVal, oldVal) => {
        console.log('obj.name 改变了')
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      }
    )

    return {
      count,
      test,
      obj,
      arr,
      countAddFive,
      countAddOne,
      countAddTwo,
      updateObj
    }
  }
}
</script>
